<template>
  <div class="wrap">
    <div class="fom">
      <h2>录入试题</h2>
      <el-form>
        <el-form-item label="题型">
          <el-select
            placeholder="选择题型"
            v-model="obj.type"
            @change="showlab"
          >
            <el-option
              v-for="(item, index) in types"
              :key="index"
              :label="item"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题干">
          <el-input type="textarea" :rows="4" v-model="obj.questionTitle" />
        </el-form-item>
        <el-form-item label="答案">
          <el-input type="textarea" :rows="4" v-model="obj.answer" />
        </el-form-item>
        <div :class="show ? 'block' : 'none'">
          <p>选项<el-button @click="addopn" class="addbtn">+</el-button></p>
          <p class="lab clearbox" v-for="(item, index) in optin" :key="index">
            <el-input v-model="item.value" />
            <el-button @click="delopn(index)">-</el-button>
          </p>
        </div>
        <el-form-item label="题目难度">
          <el-select placeholder="选择难度" v-model="obj.level">
            <el-option
              v-for="(item, index) in levels"
              :key="index"
              :label="item"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <div>
          <h3>标题组</h3>
          <el-checkbox-group v-model="obj.tags">
            <el-checkbox
              :label="item.tagId"
              v-for="item in tags"
              :key="item.tagId"
            >
              {{ item.tagName }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="msg">{{ msg }}</div>
        <div>
          <el-button type="primary" @click="subfun">提交</el-button>
          <el-button type="success">重置</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { ElMessageBox } from "element-plus";
export default {
  name: "Addtk",
  data() {
    return {
      tags: [],
      types: [
        "请选择",
        "单选题",
        "多选题",
        "填空题",
        "判断题",
        "简答题",
        "输出题",
        "编程题",
      ],
      levels: ["请选择", "简单", "容易", "中", "难", "非常难"],
      obj: {
        type: "",
        questionTitle: "",
        answer: "",
        questionOptions: [],
        level: "",
        tags: [],
      },
      show: false,
      optin: [{ id: 1, value: "" }],
      msg: "",
    };
  },
  methods: {
    showlab: function () {
      if (this.obj.type == 1 || this.obj.type == 2) {
        this.show = true;
      } else {
        this.show = false;
      }
    },
    addopn: function () {
      var x = this.optin;
      x.push({ id: x.length, value: "" });
      this.optin = x;
    },
    delopn: function (index) {
      var x = this.optin;
      x.splice(index, 1);
      this.optin = x;
    },
    subfun: function () {
      this.msg = "";
      var flg = true;
      if (this.obj.type == 1 || this.obj.type == 2) {
        for (let i = 0; i < this.optin.length; i++) {
          if (this.optin[i].value == "") {
            flg = false;
            break;
          }
        }
      }
      if (this.obj.type < 1 || this.obj.type > 7) {
        this.msg = "请选择题型";
      } else if (this.obj.questionTitle == "") {
        this.msg = "请填写题干";
      } else if (this.obj.answer == "") {
        this.msg = "请填写答案";
      } else if (flg == false) {
        this.msg = "选项框不能为空";
      } else if (this.obj.level < 1 || this.obj.level > 5) {
        this.msg = "请选择题目难度";
      } else if (this.obj.tags.length == 0) {
        this.msg = "请选择标题组";
      } else {
        var x = [];
        for (let i = 0; i < this.optin.length; i++) {
          x.push(this.optin[i].value);
        }
        this.obj.questionOptions = x;
        let str = "";
        for (let v of Object.keys(this.obj)) {
          str += "&" + v + "=" + this.obj[v];
        }
        str = str.substring(1);
        this.$axios
          .request({
            method: "post",
            url: "https://114.55.145.59:8443/library/quiz",
            data: str,
          })
          .then((result) => {
            console.log(result);
            if (result.status == "200") {
              ElMessageBox.alert("添加成功", "提示", {
                confirmButtonText: "OK",
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
  created() {
    var th = this;
    this.$axios
      .get("https://114.55.145.59:8443/librarytag/tag")
      .then((result) => {
        console.log(result.data);
        var x = [];
        for (let i = 0; i < result.data.length; i++) {
          if (result.data[i].tagName !== null) {
            x.push(result.data[i]);
          }
        }
        th.tags = x;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style>
.fom {
  width: 900px;
  margin: 20px auto;
  background-color: white;
  padding: 20px;
}
.fom h2 {
  background-color:aquamarine;
  color: white;
  padding: 5px 20px;
}
.fom h3 {
  background-color: #81D8D0;
  color: white;
  padding: 5px 20px;
}
.fom .el-form > div {
  margin: 15px 0;
}
.fom .el-form > div label {
  margin-top: 10px;
}
.lab {
  width: 80%;
  margin: 20 auto;
}
.lab .el-input {
  float: left;
  width: 80%;
}
.lab .el-button {
  float: left;
  margin-left: 15px;
  margin-top: 15px;
}
.fom .addbtn {
  margin-left: 20px;
}
.msg {
  color: red;
}
</style>
